import { Card, Row, Col } from "antd";
import { useNavigate } from "react-router-dom";
import {
  AppstoreOutlined,
  MessageOutlined,
  UsergroupAddOutlined,
  ThunderboltOutlined,
} from "@ant-design/icons";
import Image from "@/assets/image.png";
import "./index.css";
import { useState, useEffect } from "react";
import service from "@/http/request";

const iconMap = {
  资源: <AppstoreOutlined style={{ fontSize: 28, color: "#1677ff" }} />,
  论坛: <MessageOutlined style={{ fontSize: 28, color: "#52c41a" }} />,
  私信: <UsergroupAddOutlined style={{ fontSize: 28, color: "#fa541c" }} />,
  活动: <ThunderboltOutlined style={{ fontSize: 28, color: "#eb2f96" }} />,
};

const Home = () => {
  const navigate = useNavigate();
  const [carouselPosts, setCarouselPosts] = useState([]);
  const features = [
    { title: "资源", path: "/seed" },
    { title: "论坛", path: "/forum" },
    { title: "私信", path: "/messagelist" },
    { title: "活动", path: "/activity" },
  ];

  useEffect(() => {
    service.get("/forum2/posts/recommend").then((res) => {
      const data = res;
      const posts = Object.keys(data).map((key) => data[key]);
      console.log(posts);
      setCarouselPosts(posts);
    });
  }, []);

  return (
    <div className="home-container">
      {/* 顶部横幅 */}
      <div
        className="home-background"
        style={{
          backgroundImage: `url(${Image})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          height: 300,
          position: "relative",
          color: "#fff",
        }}
      >
        {/* 黑色透明遮罩 */}
        <div
          style={{
            backgroundColor: "rgba(0,0,0,0.4)",
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
          }}
        ></div>

        <div
          className="home-bg-title"
          style={{
            position: "relative",
            textAlign: "center",
            paddingTop: 60,
            fontSize: 30,
            fontWeight: "bold",
            zIndex: 1,
          }}
        >
          欢迎来到 PT 社区
        </div>
        <div
          style={{
            position: "relative",
            textAlign: "center",
            fontSize: 16,
            marginTop: 10,
            zIndex: 1,
          }}
        >
          <p style={{ margin: 0 }}>
            每一位开发者都在贡献和更新技术内容，共同参与社区建设，维护社区秩序。
          </p>
          <p style={{ margin: 0 }}>
            如果你也热爱技术，愿意贡献力量，欢迎加入我们！
          </p>
        </div>

        {/* 功能卡片区 */}
        <div
          style={{
            position: "absolute",
            bottom: -40,
            left: "50%",
            transform: "translateX(-50%)",
            width: "90%",
            zIndex: 2,
          }}
        >
          <Row gutter={[24, 16]} justify="center">
            {features.map((item) => (
              <Col xs={12} sm={6} key={item.title}>
                <Card
                  hoverable
                  onClick={() => navigate(item.path)}
                  className="custom-card"
                  style={{
                    textAlign: "center",
                    borderRadius: 12,
                    transition: "all 0.3s",
                  }}
                  bodyStyle={{ padding: 20 }}
                >
                  <div style={{ marginBottom: 12 }}>{iconMap[item.title]}</div>
                  <div style={{ fontSize: 16, fontWeight: 500 }}>
                    {item.title}
                  </div>
                </Card>
              </Col>
            ))}
          </Row>
        </div>
      </div>

      {/* ↓↓↓ 扩展模块区域 ↓↓↓ */}
      <div style={{ marginTop: 80, padding: "0 5%" }}>
        {/* 📢 公告栏 */}
        <Card title="📢 社区公告" bordered={false}>
          <ul style={{ margin: 0, paddingLeft: 20 }}>
            <li>🎉 新增抽奖功能，快去看看吧！</li>
            <li>🛠 系统维护将在本周六凌晨 1:00 进行。</li>
            <li>🔥 技术征文活动火热进行中，参与赢奖品！</li>
          </ul>
        </Card>

        <Card title="🔥 热门帖子" bordered={false} style={{ marginTop: 20 }}>
          {carouselPosts.length > 0 ? (
            <ul style={{ paddingLeft: 20, margin: 0 }}>
              {carouselPosts.map((post) => (
                <li key={post.postId}>
                  <a href={`/postdetail/${post.postId}`}>{post.title}</a>
                </li>
              ))}
            </ul>
          ) : (
            <p>加载中...</p>
          )}
        </Card>

        {/* 🧭 新手指引 */}
        <Card
          title="🧭 新手上路指南"
          bordered={false}
          style={{ marginTop: 20 }}
        >
          <p>欢迎来到 PT 社区！以下是你可能需要的指引：</p>
          <ul style={{ paddingLeft: 20 }}>
            <li>
              <a href="/docs/guide">新手必读</a>
            </li>
            <li>
              <a href="/guide/resources">资源发布规则</a>
            </li>
            <li>
              <a href="/guide/activity">如何参与社区活动</a>
            </li>
          </ul>
        </Card>
      </div>
    </div>
  );
};

export default Home;
